<template>
  <div>
    <h1 style="text-align: center;">泽优Office文档转换(zyOffice) for wangEditor3</h1>
    <div id="editor"></div><br />
    <p>第二个编辑器</p>
    <div id="editor2"></div>    
  </div>
</template>

<script>
import E from 'wangeditor'
const { $, BtnMenu, DropListMenu, PanelMenu, DropList, Panel, Tooltip } = E
import {zyOffice,zyOfficeManager} from '../../static/zyoffice/js/w'

//WordPaster Button
class WordImportBtn extends BtnMenu {
    constructor(editor) {
        const $elem = E.$(
            `<div class="w-e-menu" data-title="导入Word(docx格式)">
                <img src="../../static/zyoffice/css/w.png"/>
            </div>`
        )
        super($elem, editor)
    }
    clickHandler() {
      zyOffice.getInstance().SetEditor(this.editor);
      zyOffice.getInstance().api.openDoc();
    }
    tryChangeActive() {this.active()}
}
//wordExport Button
class WordExportBtn extends BtnMenu {
    constructor(editor) {
        const $elem = E.$(
            `<div class="w-e-menu" data-title="导出Word(docx格式)">
                <img src="../../static/zyoffice/css/exword.png"/>
            </div>`
        )
        super($elem, editor)
    }
    clickHandler() {
      zyOffice.getInstance().SetEditor(this.editor);
      zyOffice.getInstance().api.exportWord();
    }
    tryChangeActive() {this.active()}
}
//pdf paster Button
class PdfImportBtn extends BtnMenu {
    constructor(editor) {
        const $elem = E.$(
            `<div class="w-e-menu" data-title="导入PDF文档">
                <img src="../../static/zyoffice/css/pdf.png"/>
            </div>`
        )
        super($elem, editor)
    }
    clickHandler() {
      zyOffice.getInstance().SetEditor(this.editor);
      zyOffice.getInstance().api.openPdf();
    }
    tryChangeActive() {this.active()}
}

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  mounted(){
        zyOffice.getInstance({
            word: 'http://localhost:13710/zyoffice/word/convert',
            wordExport: 'http://localhost:13710/zyoffice/word/export',
            pdf: 'http://localhost:13710/zyoffice/pdf/upload'            
        });//加载控件

    // 注册菜单
    E.registerMenu("WordImportBtn", WordImportBtn)
    E.registerMenu("WordExportBtn", WordExportBtn)
    E.registerMenu("PdfImportBtn", PdfImportBtn)

    var editor = new E('#editor');

    editor.create();

    var edt2 = new E('#editor2');
    edt2.create();
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
